<template>
  <div class="adminListContainer" :style="{height:adminListContainerHeight}">
    <myHeader title="管理员列表" titleAdd="添加管理员"></myHeader>
    <!--    <el-button @click="showAdminAddDialog">添加管理员</el-button>-->
    <Search></Search>
    <div class="tableContainer" :style="{height:tableContainerHeight}">
      <el-table
          :data="tableData1"
          :height="tableHeight"
          style="width: 100%"
          :default-sort="{prop: 'vid', order: 'descending'}"
          stripe
          border
      >
        <el-table-column
            prop="mId"
            label="ID"
            sortable
            min-width="80">
        </el-table-column>
        <el-table-column
            prop="mNo"
            label="登陆账号"
            sortable
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="mName"
            label="真实姓名"
            sortable
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="mSex"
            label="性别"
            sortable
            min-width="80">
        </el-table-column>
        <el-table-column
            prop="mPhone"
            label="电话"
            sortable
            min-width="130">
        </el-table-column>
        <el-table-column
            prop="rName"
            label="角色名"
            sortable
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="mScope"
            label="部门管辖范围"
            sortable
            min-width="150">
        </el-table-column>
        <el-table-column
            prop="mStatus"
            label="使用状态"
            sortable
            min-width="120">
          <template slot-scope="scope">
            <el-tag size="small"
                    style="cursor:pointer;"
                    @click="updateUseStatus(scope.row)"
                    :type="scope.row.mStatus === '1'? '' : 'info'"
                    disable-transitions>{{ scope.row.mStatus === '1' ? '已启用' : '已停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="mLogin"
            label="登陆状态"
            sortable
            min-width="130">
          <template slot-scope="scope">
            <el-tag size="small"
                    style="cursor:pointer;"
                    @click="updateLoginStatus(scope.row)"
                    :type="scope.row.mLogin === '1'? '' : 'info'"
                    disable-transitions>{{ scope.row.mLogin === '1' ? '正常状态' : '管理员锁定' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="aHandle"
            label="操作"
            sortable
            min-width="133">
          <template slot-scope="scope">
            <i class="el-icon-edit i-color" @click="handleAdminEdit(scope.row)"></i>
            <i v-if="scope.row.mId!==1" class="el-icon-close i-color" @click="deleteAdmin(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
      <Paging :pageSum="pageSum" :total="total"></Paging>
    </div>

    <AdminEdit></AdminEdit>
    <AdminAdd></AdminAdd>
  </div>
</template>

<script>
import AdminEdit from '@/pages/Role/AdminEdit'
import AdminAdd from '@/pages/Role/AdminAdd'
import {mapState, mapMutations, mapActions} from 'vuex'

export default {
  name: "AdminList",
  components: {
    AdminEdit,
    AdminAdd
  },
  data() {
    return {
      val: '',
      tableData: [],
      tableData1: [],
      pageSum: 0,
      limit: 10,
      page: 1,
      total: 0
    }
  },
  computed: {
    ...mapState('Information', ['changeLimit', 'changePage', 'inputValue']),
    ...mapState('admin', ['addStatus', 'updateStatus']),
    changePage: {
      get() {
        return this.$store.state.Information.changePage
      },
      set(val) {
        return this.$store.state.Information.changePage = val
      }
    },
    changeLimit: {
      get() {
        return this.$store.state.Information.changeLimit
      },
      set(val) {
        return this.$store.state.Information.changeLimit = val
      }
    },
    inputValue: {
      get() {
        return this.$store.state.Information.inputValue
      },
      set(val) {
        return this.$store.state.Information.inputValue = val
      }
    },
    adminListContainerHeight() {
      if (this.tableData1.length > 15) {
        return 15 * 43 + 198 + 'px'
      } else if (this.tableData1.length < 10) {
        return 10 * 43 + 160 + 'px'
      }
      return this.tableData1.length * 43 + 198 + 'px'
    },
    tableContainerHeight() {
      if (this.tableData1.length > 15) {
        return 15 * 43 + 18 + 'px'
      } else if (this.tableData1.length < 10) {
        return 10 * 43 + 10 + 'px'
      }
      return this.tableData1.length * 43 + 18 + 'px'
    },
    tableHeight() {
      if (this.tableData1.length > 15) {
        return 15 * 43 - 60
      } else if (this.tableData1.length < 10) {
        return 10 * 43 - 60
      }
      return this.tableData1.length * 43 - 60
    }
  },
  watch: {
    changeLimit(newLimit) {
      this.limit = newLimit
      this.getInfo(this.limit, this.page)
    },
    changePage(newPage) {
      this.page = newPage
      this.getInfo(this.limit, this.page)
    },
    inputValue(newValue) {
      this.searchInfo(newValue)
    },
    //监视add状态
    addStatus(newStatus) {
      if (newStatus) this.getInfo(this.limit, this.page)
    },
    updateStatus(newStatus) {
      if (newStatus) this.getInfo(this.limit, this.page)
    }
  },
  methods: {
    ...mapMutations('admin', ['handleAdminEdit', 'showAdminAddDialog']),
    //数据整理
    async getRnameUseRid(obj) {
      for (let i = 0; i < obj.length; i++) {
        await this.$axios({
          method: 'POST',
          url: '/role/showRes',
          params: {
            rId: obj[i].rName
          }
        }).then(res => {
          console.log(res.data.rName)
          this.val = res.data.rName
        })
        obj[i].rName = this.val
      }
      this.tableData1 = obj
    },
    //请求页面数据函数
    async getInfo(limit, page) {
      console.log(limit, page)
      await this.$axios({
        method: 'GET',
        url: '/user/showUsers',
        params: {
          limit,
          page
        }
      }).then(res => {
        this.tableData = this.getRnameUseRid(res.data.data)
        this.pageSum = Math.ceil(res.data.data.length / limit)
        this.total = res.data.data.length
        if (res.data.data.length === 0) {
          this.changePage -= 1
        }
      })
    },
    //搜索查询函数
    async searchInfo(keyword) {
      if (keyword === '') {
        this.getInfo(this.limit, this.page)
      } else {
        console.log(keyword)
        this.page = 1
        this.changePage = 1
        let limit = this.limit
        let page = this.page
        await this.$axios.get(`/user/selectByAll/${page}/${limit}/${keyword}`)
            .then(res => {
              console.log(res.data.data)
              this.tableData = this.getRnameUseRid(res.data.data)
              this.pageSum = Math.ceil(res.data.count / limit)
              this.total = res.data.count
            }).catch(err => {
              console.log(err)
            })
      }
    },
    //删除
    async deleteAdmin({mId}) {
      await this.$axios({
        method: 'POST',
        url: '/user/deleteUser',
        params: {
          mId
        }
      }).then(res => {
        console.log(res)
        if (res.data.msg === '删除成功') {
          this.getInfo(this.limit, this.page)
        }
      })
    },
    //修改登录状态
    async updateLoginStatus({mId}) {
      await this.$axios({
        method: 'POST',
        url: '/user/loginStatus',
        params: {
          mId
        }
      }).then(res => {
        if (res.data.msg === '修改成功') {
          this.getInfo(this.limit, this.page)
        }
      })
    },
    //修改使用状态
    async updateUseStatus({mId}) {
      await this.$axios({
        method: 'POST',
        url: '/user/status',
        params: {
          mId
        }
      }).then(res => {
        if (res.data.msg === '修改成功') {
          this.getInfo(this.limit, this.page)
        }
      })
    }
  },
  created() {
    this.getInfo(this.limit, this.page)
  },
  beforeDestroy() {
    this.changePage = 1
    this.changeLimit = 10
    this.inputValue = ''
  },
}
</script>

<style scoped>
.adminListContainer {
  width: 97%;
  margin: 15px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.tableContainer {
  width: 96%;
  margin: 15px auto;
  border: 1px solid #cfd1d2;
}

.i-color {
  margin-right: 20px;
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
}
</style>
